<template>
	<view class="container">
		<view class="main">
			<template v-if="action === 'add'">
				<RouteMakeNav :curProgress="2" @navBack="goBack"></RouteMakeNav>
			</template>
			<template v-if="action === 'edit'">
				<view class="Row1" v-if="action === 'edit'">
					<image src="@/static/arrowRight.svg" class="icon" style="transform: rotate(180deg);" @click="goBack" role="button" aria-label="上一步"></image>	
					<text class="edit-heading">修改路线名称和分类</text>
				</view>
			</template>	
			<view class="Row3">
				<view class="box">
					<text class="one">路线名称</text>
					<text class="two">
						<input 
							class="input--line"
							:class="{'input--down':editName}"
							type="text" 
							placeholder="请输入路线名称"
							v-model="routeName">
						</input>
					</text>
				</view>
				<view class="box">
					<text class="one">路线分类</text>
					<view class="flex--row flex--between">
						<view class="">
								<input  
										placeholder="请输入路线分类"
										@focus="showdown=true"
										class="input--line" 
										v-if="editCategoryStatus === 1"
										type="text"
										v-model="routeCategory" 
								></input>
								<view v-show="editCategoryStatus === 2" class="category--active" @click.stop="editCategoryStatus = 1">{{ routeCategory }}</view>
						</view>
						<view class="show" v-show="showdown">
							<scroll-view scroll-y="true">
								<view class="list" v-for="(category,index) in categories" :key="index" @click="selectItem(category)">
									{{category}}
								</view>
							</scroll-view>
						</view>
						<view v-if="editCategoryStatus === 1">
							<image src="@/static/tick_line.svg" class="icon" @click.stop="changeEditStatus('confirm')" role="button" aria-label="确认分类" ></image>
						</view>
					</view>
				</view>
				<view class="box4">
					<view class="exit v1" @click="handleCancelRoute" role="button">
						退出
					</view>
					<view class="save v1" @click="handleSubmitRoute" role="button">
						保存
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import RouteMakeNav from "./components/RouteMakeNav.vue"
	import * as RouteApi from "@/api/route/route.js"
	import { mapActions,mapGetters } from "vuex"
	import { REFRESH_ROUTES } from "@/core/constant/event.js"
	
	export default {
		components:{
			RouteMakeNav
		},
		data() {
			return {
				showdown:false,//是否显示下的数组
				showinput:true,//是否显示输入框
				
				routeCategory:"",
				routeName:"",
				categories:[],
				editCategoryStatus:1,
				
				action:""
			}
			
		},
		computed:{
			...mapGetters(["route"]),
			editName(){
				return this.routeName !== ""
			},
		},
		methods: {
				goBack(){
					this.completeRouteInfo()
					// 去第三步
					const action = this.action
					this.$navTo("pages/chux/addroute3",{action})
				},
				selectItem(category){
					this.routeCategory = category
				},
				changeEditStatus(action){
					if(this.routeCategory === "" || this.routeCategory === null){
						 this.$confirm({content:"路线分类不能为空"})
						 return
					 }
					
					if(action === 'confirm'){
						this.editCategoryStatus = 2
						// 如果是新添加的路线，则插入路线列表中
						if(this.categories.indexOf(this.routeCategory) === -1){
							this.categories.splice(0,0,this.routeCategory)
						}
						this.showdown = false // 折叠路线分类
					}
				},
				handleClearRoute(isClear){
					if(isClear){
						this.clearRoute()
					}
					
				},
				clearRoute(){
					this.$store.dispatch("route/clearRouteInfo")
				},
				handleCancelRoute(){
					const config = {
						content:"是否保存定制的路线信息",
						confirm:"保存",
						cancel:"不保存",
						url:"pages/chux/chux"
					}
					this.$confirm(config,this.handleClearRoute.bind(this,false),this.handleClearRoute.bind(this,true))
				},
				validateRouteInfo(){
					if(this.routeName === ""){
						this.$confirm({content:"路线分类不能为空"})
						return false
					}
					if(this.routeCategory === "" || this.routeCategory === null){
						this.$confirm({content:"路线分类不能为空"})
						return false
					}
					if(this.editCategoryStatus !== 2){
						this.$confirm({content:"请输入路线分类"})
						return false
					}
					return true
				},
				completeRouteInfo(){
					this.$store.dispatch("route/setRouteName",this.routeName)
					this.$store.dispatch("route/setRouteCategory",this.routeCategory)
				},
				handleSubmitRoute(){
				    if(!this.validateRouteInfo()) return
					this.completeRouteInfo()
					const msg = this.action === 'add' ? "定制路线成功" : "修改路线成功"
					const saveOrUpdateRoute = this.action === 'add' ?  this.submitRoute() : this.updateRoute()
					saveOrUpdateRoute.then(res => {
							const successConfig = {
								msg,
								url:"pages/chux/chux"
							}
							uni.$emit(REFRESH_ROUTES)
							this.$success(successConfig,this.handleClearRoute(true))
						})
						.catch(err => {
							console.log(err)
							this.$error(err.msg ?? "定制路线失败")
						})
				},
				submitRoute(){
					return this.$store.dispatch("route/submitRouteInfo")	
				},
				updateRoute(){
					return this.$store.dispatch("route/updateRouteInfo")	
				},
				getCategories(){
					// 获取路线分类列表
					const app = this
					return new Promise((resolve,reject) => {
						RouteApi.categoryList()
						.then(res => {
								const data = res.map(el => el.category)
								app.categories = app.categories.concat(data)
								resolve(data)
						})
						.catch(reject)
					})
				},
				async initData(){
					this.categories.length !== 0 || await this.getCategories()
					this.routeName = this.route.name ?? ""
					this.routeCategory = this.route.category || this.categories[0]
				}
		},
		onShow(){
			this.initData()
		},
		onLoad(options){
			this.action = options.action
		}
	}
</script>

<style lang="scss">
page{
		background-color: #FFFFFF;
		height: 100%;
	}
	.container{
		display: flex;
		.main{
			margin: auto;
			width: 600rpx;
					
			display: flex;
			flex-direction:column;
			align-items: center;
			gap:18px;
			
			.Row1{
				width:100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:12px;
				
				.edit-heading{
					font-size: 24px;
					color:#383838;
					font-weight: 800;
				}
			}
			.Row2{
				width: 300px;
				
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
				text-align: center;
				vertical-align: top;
				.one{
					font-size: 20px;
					font-weight: 700;
					letter-spacing: 0px;
					
					color:#333;
				}
				.two{
					margin-top: 12px;
					color:#666;
				}
			}
			.Row3{
				margin: auto;
				width: 290px;
				height: 627px;
				border-radius: 10px;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				
				.box{
					@include border-four-roundings;
					width:100%;
					margin-top: 20px;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					
					padding: 12px;
					box-sizing: border-box;
					color:#383838;
					.one{
						font-size: 20px;
						font-weight: 700;
						margin-bottom: 6px;
					}
				}
				.box2{
					height: auto;
					.show{
						margin-top: 13px;
						margin-bottom: 8px;
						
						display: flex;
						flex-direction: column;
						.list{
							
							font-weight: 400;
							letter-spacing: 0px;
							line-height: 17.38px;
							color:#383838;
							margin-bottom: 10px;
						}
						.hidden{
							 display: none;  
						}
					}
				}
				.box3{
					.m4{
						margin-top: 24px;
						width: 278px;
						height: 32px;
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;
						ul{
							display: flex;
							flex-direction: row;
							gap: 40upx;
							justify-content: right;
							li{
								display: flex;
								flex-direction: row;
								gap: 9upx;
								text{
									
									font-weight: 400;
									letter-spacing: 0px;
									line-height: 17.38px;
									color: #383838;
								}
								img{
									width: 25upx;
									height: 25upx;

								}
							}
						}
					}
				}
				.box4{
					width: 278px;
					height: 44px;
					margin-top: 24px;
					display: flex;
					flex-direction: row;
					.v1{
						height: 80upx;
						line-height: 80upx;
						border-radius: 20upx;
						font-weight: 900;
						font-size: 38upx;
						text-align: center;
					}
					.exit{
						border: 3upx solid #000;
						width: 400upx;
						margin-right: 13upx;
					}
					.save{
						height: 86upx;
						line-height: 86upx;
						width: 700upx;
						color: #fff;
						background-color: #f2843a;
					}
				}
				.category--active{
					width: 155px;
					height: 29px;
					opacity: 1;
					border-radius: 10px;
					background: rgba(217, 72, 15, 0.2);
					display: flex;
					justify-content: center;
					align-items: center;
					
					font-weight: 700;
					letter-spacing: 0px;
					line-height: 20.27px;
					color: rgba(217, 72, 15, 1);
					text-align: left;
					vertical-align: top;
				}
			
			}
		}
	}
</style>
